﻿<!DOCTYPE html>
<html>
<head>
	<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
	<script src="../../jsrender.js" type="text/javascript"></script>
	<script src="../../jquery.observable.js" type="text/javascript"></script>
	<script src="../../jquery.views.js" type="text/javascript"></script>
	<link href="../resources/demos.css" rel="stylesheet" type="text/css" />

	<style type="text/css">
		table { cursor:pointer; border-collapse:collapse; border:2px solid blue; width:300px; margin:8px; }
		table tr { border:1px solid blue; color:blue; background-color:#f8f8f8; } table td { padding:3px; } table tr:hover { color:red; }
		.movieDetail { background-color:yellow; } .movieDetail.row1 { border-bottom:none; } .movieDetail.row2 { border-top:none; }
	</style>
</head>
<body>
<div class="nav"><a href="../demos.html">JsViews Demos</a></div>

<h3>Accordion: Using dynamic switching of templates</h3>

<script id="summaryTemplate" type="text/x-jsrender">
	<tr class='movieSummary'><td>
		{{>title}}
	</td></tr>
</script>

<script id="detailTemplate" type="text/x-jsrender">
	<tr class='movieDetail row1'><td>
		{{>title}}
	</td></tr>
	<tr class='movieDetail row2'><td><b>Languages:</b>
		{{for languages}}
			<div>
				<em>{{>name}}</em>
			</div>
		{{/for}}
	</td></tr>
</script>

Click for details:
<div class="height">
	<table><tbody id="movieList"></tbody></table>
</div>

<script type="text/javascript">

	var selectedSubView = null,

		movies = [
			{
				title: "The Red Violin",
				languages: [
					{ name: "English" },
					{ name: "French" }
				]
			},
			{
				title: "Eyes Wide Shut",
				languages: [
					{ name: "French" },
					{ name: "German" },
					{ name: "Spanish" }
				]
			},
			{
				title: "The Inheritance",
				releaseYear: "1976",
				languages: [
					{ name: "English" },
					{ name: "Dutch" }
				]
			}
		];

		$.templates({
			detailTemplate: "#detailTemplate",
			summaryTemplate: "#summaryTemplate"
		});

	function unselect() {
		/* Switch template of the selected view back to the summary template */
		if ( selectedSubView ) {
			selectedSubView.tmpl = $.templates.summaryTemplate;
			selectedSubView.refresh();
			selectedSubView = null;
		}
	}

	/* Render the movies array as data-linked content under the movieList <ul>, using the summaryTemplate */
	$.link.summaryTemplate( "#movieList", movies )

		/* onclick handler for movie subviews when not selected */
		.on( "click", ".movieSummary", function() {
			/* Unselect the currently selected view */
			unselect();

			/* Get the view which this clicked element
			   belongs to, and make it the selected view */
			selectedSubView = $.view(this);

			/* Switch the template on this view to the detail template */
			selectedSubView.tmpl = $.templates.detailTemplate;
			selectedSubView.refresh();
		})

		/* onclick handler for movie subviews when selected */
		.on( "click", ".movieDetail", function() {
			/* Unselect the currently selected view */
			unselect();
		});

</script>
</body>
</html>
